<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-01-11 13:59:26
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-01-26 16:28:57
-->
<template>
  <div>
    <div v-for="(item, index) in Subtask" :key="index">
      <div class="subTaskList">
        <div class="subTaskList-top">
          <h3 @click="drawer(item)">{{ index + 1 }}、{{ item.name }}</h3>
          <div class="subTaskList-top-add">
            <span
              style="font-size: 28px; cursor: pointer"
              @click="newSubListtask(item)"
              >+</span
            >
          </div>
        </div>
        <div class="subTaskList-bottom">
          <div class="endTime">
            {{ item.finishTime }}
          </div>
          <div class="headImg">
            <img :src="item.avatar" alt="" />
          </div>
        </div>
      </div>
      <recursion
        v-if="item.children"
        :Subtask="item.children"
        :dialogObj="dialogObj"
        :subtaskForm="subtaskForm"
        :getChargeList="getChargeList"
        :index="index"
      ></recursion>
    </div>
    <drawer
      :dialog="dialog"
      :drawerData="drawerData"
      v-if="dialog.taskDrawerEject"
    ></drawer>
  </div>
</template>

<script>
import drawer from "../../dailyTask/components/drawer.vue";
export default {
  components: { drawer },
  name: "recursion",
  props: {
    Subtask: {
      type: Array,
    },
    dialogObj: {
      type: Object,
      required: true,
    },
    subtaskForm: {
      type: Object,
      required: true,
    },
    getChargeList: {
      type: Function,
      required: true,
    },
    index: {
      type: Number,
    },
  },
  data() {
    return {
      dialog: {
        taskDrawer: false,
        taskDrawerEject: false,
        aboutShowEject: false,
        aboutShow: false,
      },
      drawerData: {},
    };
  },
  methods: {
    drawer(item) {
      this.drawerData = item;
      this.dialog.taskDrawerEject = true;
      this.$nextTick(function () {
        this.dialog.taskDrawer = true;
      });
    },
    // 新增子任务下任务
    newSubListtask(item) {
      this.dialogObj.subtaskShow = true;
      this.subtaskForm.parentId = item.id;
      this.getChargeList();
    },
  },
};
</script>

<style lang="less" scoped>
.subTaskList {
  margin-top: 20px;
  width: 100%;
  height: 80px;
  border-bottom: 1px solid #ececec;
  .subTaskList-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    h3 {
      cursor: pointer;
      color: #1267fa;
    }
    .subTaskList-top-add {
      margin-right: 30px;
      display: none;
    }
  }
  .subTaskList-top:hover {
    .subTaskList-top-add {
      display: block;
    }
  }
  .subTaskList-bottom {
    margin-top: 10px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    .endTime {
      line-height: 35px;
    }
    .headImg {
      width: 35px;
      height: 35px;
      border-radius: 35px;
      // background-color: #ff3040;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.subTaskList:last-child {
  margin-bottom: 20px;
}
</style>